<template>
  <div class="container">
    <el-dialog title="派单" :visible.sync="handModalShow" width="650px" :before-close="cancelBtn">
      <div class="container_examine">
        <p>预约信息</p>
        <div class="examine">
          <base-info-form :base-list="examineList" />
        </div>
      </div>
      <div class="container_examine" v-show="auditInfo.result">
        <p>审核结果</p>
        <div class="examine">
          <el-row>
            <el-col :span="24">
              <span>审核结果：</span>
              <span>{{ auditInfo.result }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span>审核意见：</span>
              <span>{{ auditInfo.opinion }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="container_examine">
        <p>派发工作人员</p>
        <div class="examine">
          <el-form ref="ruleForm" :rules="rules" label-position="top" :inline="true" :model="formInline" label-width="80px">
            <el-form-item label="机构部门" prop="unit">
              <!--<el-select v-model="formInline.unit" placeholder="请选择机构部门">-->
              <!--<el-option v-for="item in unitList " :key="item.id" :label="item.department" :value="item.id" />-->
              <!--</el-select>-->
              <el-cascader
                v-model="formInline.unit"
                :options="unitList"
                ref="myCascader"
                :props="{label:'name',value:'code'}"
                @change="handleChange"></el-cascader>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click= "cancelBtn">取消</el-button>
        <el-button size="small" type="primary" @click="saveBtn">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import BaseInfoForm from './BaseInfoForm'
  import { getbaseInfoList, getStructureList, handleInfoList } from '../api'
  export default {
    components: {
      BaseInfoForm
    },
    props: ['handleId','handModalShow'],
    data() {
      return {
        formInline: {
          unit: '',
          personnel: '',
          ryid: '',
          department: ''
        },
        rules: {
          unit: [
            { required: true, message: '请选择机构部门', trigger: 'change' }
          ],
          personnel: [
            { required: true, message: '请选择工作人员', trigger: 'change' }
          ]
        },
        userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
        examineList: {},
        auditInfo: {},
        unitList: [],
        apply_id: ''
      }
    },
    watch: {
      handleId(newVal) {
        console.log(newVal)
        this.apply_id = newVal
        this.getInfoList(newVal)
      },
    },
    created() {
      this.getStructureList()
    },
    methods: {
      // 获取机构列表
      getStructureList(){
        getStructureList('派发').then(res => {
          this.unitList = res.data.data.sjlist;
        })
      },
      getInfoList(handleId) {
        getbaseInfoList(handleId).then(res => {
          // console.log(res)
          this.examineList = res.data.data.info_datails
          this.auditInfo = res.data.data.audit
        })
      },
      saveBtn() {
        if(this.formInline.department){
          const data = {
            ryid:this.formInline.ryid,
            app_id:this.apply_id,
            department_id: this.formInline.unit[this.formInline.unit.length - 2],
            department:this.formInline.department,
            name:this.userInfo.nickName,
            account:this.userInfo.username,
          }
          handleInfoList(data).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '派发完成'
              })
              this.formInline.unit = ''
              // this.handModalShow = false
              this.$emit('handleFun', true)
            }
          })
        }else{
          this.$message.warning('请选择机构部门')
        }

      },
      handleChange(value) {
        let labelName = this.$refs['myCascader'].getCheckedNodes()[0].pathLabels;
        this.formInline.ryid = value[value.length-1];
        this.formInline.department = labelName[labelName.length-1];
      },
      cancelBtn() {
        this.formInline.unit = '';
        this.formInline.ryid = '';
        this.formInline.department = '';
        this.$emit('handleFun', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    ::v-deep .el-dialog {
      max-height: 80vh;
      overflow: auto;
    }
    ::v-deep .el-dialog__body {
      margin-top: 25px;
    }
    ::v-deep .el-dialog__header {
      /*background: #3489ff;*/
      position: fixed;
      width: 650px;
      z-index: 99;
      /*.el-dialog__title {*/
      /*color: #ffffff;*/
      /*}*/
      .el-dialog__headerbtn {
        top: 14px !important;
        cursor: pointer;
        /*i {*/
        /*color: #ffffff;*/
        /*}*/
      }
    }
    .container_examine{
      margin-top: 20px;
      p{
        font-size: 15px;
        color: #3D4D60;
        font-weight: bold;
      }
      .examine{
        background: #F8F8F8;
        padding: 10px;
        .el-form--inline .el-form-item{
          width: 48%;
          margin-bottom:12px;
        }
        ::v-deep .el-textarea__inner,
        ::v-deep .el-select{
          width: 100%;
        }
        ::v-deep .el-form-item__label{
          font-weight: normal;
          line-height:20px;
        }
        ::v-deep .el-form-item__label{
          font-weight: normal;
        }
        .el-row{
          padding: 6px 0;
          span:nth-child(2){
            color: #000;
          }
        }
      }
    }
  }

</style>
